<template>
    <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="6em"
    >
        <el-row type="flex" :gutter="10">
            <el-col :span="14">
                <el-form-item label="附件" prop="attachment_id">
                    <el-upload-single-file
                        v-model="formData.attachment_id"
                        :default-value="fileList"
                    ></el-upload-single-file>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" :gutter="10">
            <el-col :span="14">
                <el-form-item label="标题" prop="title">
                    <el-input
                        v-model="formData.title"
                        placeholder="请输入标题"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-button type="primary" icon="el-icon-check" @click="onConfirm"
                >完成({{ current + 1 }}/{{ selection.length }})</el-button
            >
            <el-button
                type="default"
                icon="el-icon-close"
                @click="$parent.$emit('update:visible', false)"
                >取消</el-button
            >
        </el-row>
    </el-form>
</template>

<script>
import { post } from "@/assets/js/http.js";

export default {
    name: "material-edit",
    props: {
        selection: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        selection() {
            this.setFormData();
        }
    },
    mounted() {
        this.setFormData();
    },
    components: {
        ElUploadSingleFile: () => import("@/components/ElUploadSingleFile.vue")
    },
    data() {
        return {
            current: 0,
            fileList: [],
            formData: {
                id: "",
                attachment_id: "",
                title: ""
            },
            formRules: {
                attachment_id: [
                    {
                        required: true,
                        message: "此项为必填项"
                    }
                ],
                title: [
                    {
                        required: true,
                        message: "此项为必填项"
                    }
                ]
            }
        };
    },
    methods: {
        setFormData() {
            if (this.selection.length > 0) {
                const data = this.selection[this.current];
                this.formData.id = data.id;
                this.formData.attachment_id = data.attachment.id;
                this.formData.title = data.title;
                this.fileList = [
                    {
                        name: data.attachment.name,
                        url: this.$store.getters.baseUrl + data.attachment.url
                    }
                ];
            }
        },
        onConfirm() {
            this.$refs.formRef.validate(async isValid => {
                if (isValid) {
                    const formData = JSON.parse(JSON.stringify(this.formData));
                    await post({
                        url: "/admin/wiki.document/edit",
                        data: formData,
                        loading: true,
                        successTip: true
                    });
                    if (this.current === this.selection.length - 1) {
                        this.$emit("update");
                        this.current = 0;
                        this.$parent.$emit("update:visible", false);
                        this.$refs.formRef.resetFields();
                    } else {
                        this.current += 1;
                        this.setFormData();
                    }
                }
            });
        },
        onCancel() {
            if (this.current > 0) {
                this.$emit("update");
            }
            this.current = 0;
            this.$parent.$emit("update:visible", false);
            this.$refs.formRef.resetFields();
        }
    }
};
</script>
